@extends('dashboard.includes.master')

@section('css')
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
@endsection

@section('title')
Add New Contacts
@endsection

@section('content')

<div class="container">
    <h2 class="mb-4">Add New Contact</h2>

    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#insertMethodModal">
        Choose Insertion Way
    </button>

    <!-- Modal -->
    <div class="modal fade" id="insertMethodModal" tabindex="-1" aria-labelledby="insertMethodLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
                </div>
                <div class="modal-body d-grid gap-2">
                    <button type="button" class="btn btn-outline-primary" onclick="showSection('manual')">Insert Manual</button>
                    <button type="button" class="btn btn-outline-secondary" onclick="showSection('database')">Choose From Database</button>
                    <button type="button" class="btn btn-outline-success" onclick="showSection('excel')">Upload Excel File</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Manual Input -->
    <div id="manualSection" class="mt-4 d-none">
        <h4>Add New Contact Manual</h4>
        <form action="{{ route('contacts.store') }}" method="POST">
            @csrf
            <input type="hidden" name="input_method" value="manual">
            <input type="hidden" name="group_id" value="{{ $groupId }}" />
            <div class="form-group mb-3">
                <label for="phones" class="form-label">Phone Numbers</label>
                <textarea class="form-control" name="phones" rows="5" placeholder="Enter phone numbers..."></textarea>
            </div>
            <div class="form-group mb-3">
                <label for="names" class="form-label">Names</label>
                <textarea class="form-control" name="names" rows="5" placeholder="Enter names..."></textarea>
            </div>
            <button type="submit" class="btn btn-primary">Save</button>
        </form>
    </div>

    <!-- Select from Database -->
    <div id="databaseSection" class="mt-4 d-none">
        <h4>Choose From Database</h4>
        <form action="{{ route('contacts.store.database') }}" method="POST">
            @csrf
            <input type="hidden" name="input_method" value="database">
            <input type="hidden" name="group_id" value="{{ $groupId }}" />

            <form id="filterForm">
    <div class="row">
        <div class="col-md-4">
            <label for="category_id" class="form-label">Category</label>
            <select id="category_id" name="category_id[]" class="form-select">
                <option value="">Choose Category</option>
                @foreach($categories as $category)
                    <option value="{{ $category->id }}">{{ $category->name }}</option>
                @endforeach
            </select>
        </div>

        <div class="col-md-4">
            <label for="subcategory_id" class="form-label">Subcategory</label>
            <select id="subcategory_id" name="subcategory_id" class="form-select">
                <option value="">Choose Subcategory</option>
            </select>
        </div>

        <div class="col-md-4">
            <label for="country" class="form-label">Country</label>
            <select id="country" name="country" class="form-select">
                <option value="">Choose Country</option>
                @foreach($countries as $country)
                    <option value="{{ $country }}">{{ $country }}</option>
                @endforeach
            </select>
        </div>
    </div>

    <button type="button" id="filterBtn" class="btn btn-primary mt-3">Filter</button>
</form>

<div class="mt-3">
    <h5 id="filterMessage" class="text-primary" style="display: none;">Filtered results:</h5>
    <label for="filteredPhones" class="form-label">Filtered Phones</label>
    <textarea id="filteredPhones" class="form-control" rows="6" readonly></textarea>
</div>


            <div class="form-group mb-3">
                <label for="names" class="form-label">Enter Names (in same order)</label>
                <textarea class="form-control" name="names" rows="6"></textarea>
            </div>

            <button type="submit" class="btn btn-secondary">Save</button>
        </form>
    </div>

    <!-- Upload Excel -->
    <div id="excelSection" class="mt-4 d-none">
        <h4>Upload Excel File</h4>
        <form action="{{ route('contacts.store.excel') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="input_method" value="excel">
            <input type="hidden" name="group_id" value="{{ $groupId }}" />
            <div class="form-group mb-3">
                <label for="file" class="form-label">Upload Excel File</label>
                <input class="form-control" type="file" name="file[]" accept=".xlsx, .xls" multiple required>
            </div>
            <button type="submit" class="btn btn-success">Upload</button>
        </form>
    </div>
</div>

@endsection

@section('js')
<script>
function showSection(section) {
    ['manualSection', 'databaseSection', 'excelSection'].forEach(id => {
        document.getElementById(id).classList.add('d-none');
    });
    document.getElementById(section + 'Section').classList.remove('d-none');

    const modalEl = document.getElementById('insertMethodModal');
    const modal = bootstrap.Modal.getOrCreateInstance(modalEl);
    modal.hide();

    document.body.classList.remove('modal-open');
    const backdrops = document.getElementsByClassName('modal-backdrop');
    while (backdrops.length > 0) {
        backdrops[0].parentNode.removeChild(backdrops[0]);
    }
}

document.addEventListener('DOMContentLoaded', function() {
    let inputMethod = "{{ old('input_method') }}";
    if (inputMethod === 'manual') {
        showSection('manual');
    } else if (inputMethod === 'database') {
        showSection('database');
    } else if (inputMethod === 'excel') {
        showSection('excel');
    }

    // // Load subcategories dynamically
    // document.getElementById('category_id').addEventListener('change', function() {
    //     let categoryId = this.value;
    //     fetch(`/get-subcategories/${categoryId}`)
    //         .then(res => res.json())
    //         .then(data => {
    //             const subcategorySelect = document.getElementById('subcategory_id');
    //             subcategorySelect.innerHTML = '<option value="">Choose Subcategory</option>';
    //             data.forEach(sub => {
    //                 subcategorySelect.innerHTML += `<option value="${sub.id}">${sub.name}</option>`;
    //             });
    //         });
    // });

    // // Fetch filtered phones
    // document.getElementById('filterBtn').addEventListener('click', function() {
    //     const category = document.getElementById('category_id').value;
    //     const subcategory = document.getElementById('subcategory_id').value;
    //     const country = document.getElementById('country').value;

    //     fetch(`/filter-phones?category=${category}&subcategory=${subcategory}&country=${country}`)
    //         .then(res => res.json())
    //         .then(data => {
    //             document.getElementById('filteredPhones').value = data.join('\n');
    //         });
    // });
});
</script>


<script>
    // تحميل الفئات الفرعية عند اختيار التصنيف
    document.getElementById('category_id').addEventListener('change', function () {
        let categoryId = this.value;
        fetch(`/get-subcategories/${categoryId}`)
            .then(response => response.json())
            .then(data => {
                let subSelect = document.getElementById('subcategory_id');
                subSelect.innerHTML = '<option value="">Choose Subcategory</option>';
                data.forEach(function (subcategory) {
                    subSelect.innerHTML += `<option value="${subcategory.id}">${subcategory.name}</option>`;
                });
            });
    });

    // زر الفلترة
    document.getElementById('filterBtn').addEventListener('click', function () {
        let categoryId = document.getElementById('category_id').value;
        let subcategoryId = document.getElementById('subcategory_id').value;
        let country = document.getElementById('country').value;

        const textarea = document.getElementById('filteredPhones');
        const message = document.getElementById('filterMessage');

        if (!categoryId && !subcategoryId && !country) {
            message.style.display = 'block';
            message.innerText = 'You should filter data before.';
            textarea.value = '';
            return;
        }

        fetch(`/filter-phones?category_id=${categoryId}&subcategory_id=${subcategoryId}&country=${country}`)
            .then(response => response.json())
            .then(data => {
                const textarea = document.getElementById('filteredPhones');
                const message = document.getElementById('filterMessage');
                
                // إظهار الرسالة
                message.style.display = 'block';

                if (data.length > 0) {
                    textarea.value = data.join('\n');
                } else {
                    textarea.value = 'No data found';
                }
            });
    });

    window.onload = function () {
        document.getElementById('filteredPhones').value = '';
        document.getElementById('filterMessage').style.display = 'none';
    };
</script>


@endsection
